<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			
			<swiper-item>
				<navigator url="/pages/demo2/demo2">
					<image src="/static/pic1.png" mode="aspectFill"></image>
				</navigator>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic2.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic3.webp" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/pic4.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view>
	<!-- <view>
		<image src="/static/pic1.png"  mode=""  class="pic1"></image>
		<image src="/static/pic2.png"  mode=""  class="pic2"></image>
		<image src="/static/pic3.webp" mode="aspectFill" class="pic3"></image>
		<image src="/static/pic4.jpg"  mode="heightFix"  class="pic4"></image>
	</view> -->
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	swiper{
	  width: 100vw;
	  height: 200px;
	  /* border: 1px solid red; */ /* 暂时注释掉调试 */
	}
	
	navigator {
	  width: 100%;
	  height: 100%;
	  display: block;
	}
	
	swiper-item image{
	  width: 100%;
	  height: 100%;
	  display: block;
	}
	// swiper{
	// 	width: 100vw;
	// 	height: 200px;
	// 	border: 1px solid red;
	// }
	// swiper-item{
	// 	width: 100%;
	// 	height: 100%;
	// 	background-color: pink;
	// 	image{
	// 		width: 100%; /* 图片充满整个view组件*/
	// 		height: 100%; /* 图片充满整个view组件*/
	// 	}
	// }
	// swiper-item:nth-child(2n){  /* 伪类选择器的语法*/
	// 	background-color:orange;
	// }
	// .pic1{
	// 	width: 150px;
	// 	height: 150px;
	// }
	// .pic4{
	// 	width: 300;
	// 	height: 300px;
	// }
</style>
